<template>
	<div class="process">
		<div class="subtitle row">
			<div style="font-weight: 600;">PID</div>
			<div style="font-weight: 600;">进程名</div>
		</div>
		<div class="list">
			<div class="scroll-container">
				<div class="scroll-content">
					<div
						class="row"
						v-for="(item, index) in duplicatedList"
						:key="`${item.pid}-${index}`"
					>
						<div>{{item.pid}}</div>
						<div>{{item.name}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { processInfo } from '/@/api/systemInfo'
import { ref, computed } from 'vue'

const list = ref<Array<{ pid: string; name: string }>>([])
const duplicatedList = computed(() => [...list.value])

const getList = async () => {
	const res = await processInfo()
	list.value = res.data.process_iter
}
getList()
</script>

<style scoped lang="scss">
.process {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #033c76; // 根据实际背景色调整
}

.subtitle {
	position: sticky;
	top: 0;
	z-index: 1;
	background: inherit; // 继承父容器背景色
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)
}

.row {
	width: 100%;
	height: 35px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	&:not(:last-child) {
		border-bottom: 1px solid #409eff;
	}
	transition: background 0.3s;

	&:hover {
		background: rgba(64, 158, 255, 0.1);
	}

	div {
		height: 100%;
		line-height: 35px;
		text-align: center;
		color: #fff;
		&:nth-child(1) {
			width: 120px;
			border-right: 1px solid #409eff;
		}

		&:nth-child(2) {
			flex: 1;
		}
	}
}

.list {
	flex: 1;
	overflow: hidden;
	position: relative;
	width: 100%;
	.scroll-container {
		height: 100%;
		overflow: hidden;
	}
	.scroll-content {
		width: 100%;
		animation: scroll 500s linear infinite;

		&:hover {
			animation-play-state: paused;
		}
	}
}

@keyframes scroll {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-50%);
	}
}
</style>